import React, { PureComponent, Fragment } from "react";
import ReactDom from 'react-dom';
import { DatePickerView, Modal, Button } from "antd-mobile";
import { isNull, combineDefaultStr, handleDateFunc, timeZero, timeMsec } from "../../../utils/helper"
import moment from "moment"
import { MIcon } from "../../MIcon";
interface Props{
	value: any,
	value_datatype?: string,
	type?: any,
	is_msec?: any,
	onChange: Function,
	is_now?: any,
	show_format?: string,
	format?: string
}
interface State {
	value: any,
	pickerStart: Date,
	pickerEnd: Date,
	datePickerValue: Date,
	showModal: boolean
}
export default class MyDatePickerClick extends PureComponent<Props, State> {
	timer = null;
	public state: State = {
		value: this.props.value,
		pickerStart: new Date(moment().subtract(50, "years").format("YYYY/MM/DD")),
		pickerEnd: new Date(moment().add(50, "years").format("YYYY/MM/DD")),
		datePickerValue: new Date(),
		showModal: false
	}
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let { value } = nextProps;
			if (isNull(value)) {
				if (value === undefined) {
					let { is_now, value_datatype = "string" } = nextProps;
					let isNumber = value_datatype === "number";
					if (is_now == 1) {
						if (isNumber) {
							let now = moment();
							now = timeZero(now);
							this.changeValue(now)
						}
						else {
							this.changeValue(moment())
						}
					}
				}
			}
			else {
				if (value.toString().indexOf("get") != -1) {
					value = moment(handleDateFunc(value));
					this.changeValue(moment(value))
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!value._isAMomentObject) {
			value = moment(value);
		}
		const { value_datatype = "string", type = "date", is_msec = 0 } = this.props;
		let isNumber = value_datatype === "number";
		let mFormat = "";
		if (isNull(value)) {

		}
		else {
			if (type == "year") {
				value.month(0);
				value.date(1);
				mFormat = "YYYY-01-01"
			}
			else if (type == "month") {
				value.date(1);
				mFormat = "YYYY-MM-01"
			}
			else {
				mFormat = "YYYY-MM-DD"
			}
			if (isNumber) {
				value = timeZero(value);
				// value = parseInt(value.valueOf() / 1000)
				value = Number(value.valueOf() / timeMsec(is_msec))
			}
			else {
				value = timeZero(value);
				value = value.format(mFormat)
			}
		}
		this.setState({
			value: value
		});
		clearTimeout(this.timer);
		this.timer = setTimeout(() => {
			if (!('value' in this.props)) {
				this.setState({
					value: value
				});
			}
			this.triggerChange(value);
		}, 300)
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		value = moment(value);
		this.changeValue(value);
	};

	componentDidMount() {
		let { is_now = 0, value_datatype = "string" } = this.props;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {
			if (is_now == 1) {
				if (isNumber) {
					let now = moment();
					now = timeZero(now);
					this.changeValue(now)
				}
				else {
					this.changeValue(moment())
				}
			}
		}
		else {
			if (value.toString().indexOf("get") != -1) {
				value = moment(handleDateFunc(value));
				this.changeValue(moment(value))
			}
		}
	}
	toggleModal = () => {
		let { showModal, value } = this.state;
		this.setState({
			showModal: !showModal
		})
	}
	renderButton() {
		let { value } = this.state;
		let { value_datatype = "string", is_msec = 0, type, show_format } = this.props;
		if (isNull(type)) {
			type = "date"
		}
		let showValue = "请选择日期";
		if (!isNull(value)) {
			if (value_datatype == "number") {
				if (is_msec == 1) {

				}
				else {
					value = value * 1000
				}
			}
			else {
				value = value.replace(/-/g, "/");
			}
			if (type == "date") {
				if (isNull(show_format)) {
					show_format = "YYYY年MM月DD日"
				}
				showValue = moment(value).format(show_format)
			}
			else if (type == "month") {
				if (isNull(show_format)) {
					show_format = "YYYY年MM月"
				}
				showValue = moment(value).format(show_format)
			}
			else if (type == "year") {
				if (isNull(show_format)) {
					show_format = "YYYY年"
				}
				showValue = moment(value).format(show_format)
			}
		}
		return (
			<div data-flex="box:mean cross:center" style={{ width: "100%" }}>
				<div style={{ textAlign: "center" }} onClick={() => {
					this.prevNextDate("prev")
				}} >
					<MIcon type="left" style={{ fontSize: "30px", color: "#999" }} />
				</div>
				<div onClick={() => {
					this.setState({
						datePickerValue: new Date(value)
					})
					this.toggleModal();
				}} style={{ textAlign: "center", width: "50%", margin: "0 5%", height: "40px", lineHeight: "38px" }}>
					{showValue}
				</div>
				<div style={{ textAlign: "center" }} onClick={() => {
					this.prevNextDate("next")
				}} >
					<MIcon type="xiayiye" style={{ fontSize: "30px", color: "#999" }} />
				</div>
			</div>
		)
	}
	prevNextDate = (str) => {
		let num = 1;
		if (str == "prev") {
			num = -1
		}
		else if (str == "next") {
			num = 1
		}
		let { value } = this.state;
		let { value_datatype = "string", is_msec = 0, type = "date" } = this.props;
		if (isNull(type)) {
			type = "date"
		}
		if (value_datatype === "number") {
			if (is_msec == 1) {

			}
			else {
				value = value * 1000;
			}
		}
		let newValue = moment(value);
		if (type == "date") {
			newValue.add(num, "days");
		}
		else if (type == "month") {
			newValue.add(num, "months")
		}
		else if (type == "year") {
			newValue.add(num, "years")
		}
		this.changeValue(newValue);
	}
	renderQuickDate = () => {
		let { type = "date" } = this.props;
		if (type == "date") {
			return (
				<div data-flex="main:justify" style={{ padding: "10px", borderTop: "1px solid #e7e7e7" }}>
					<Button size="small" onClick={() => {
						this.changeValue(moment().subtract(2, "days"));
						this.toggleModal();
					}} type="primary">前天</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment().subtract(1, "days"));
						this.toggleModal();
					}} type="primary">昨天</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment());
						this.toggleModal();
					}} type="primary">今天</Button>
				</div>
			)
		}
		else if (type == "month") {
			return (
				<div data-flex="main:justify" style={{ padding: "10px", borderTop: "1px solid #e7e7e7" }}>
					<Button size="small" onClick={() => {
						this.changeValue(moment().add(-2, "months"));
						this.toggleModal();
					}} type="primary">上上月</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment().add(-1, "months"));
						this.toggleModal();
					}} type="primary">上月</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment());
						this.toggleModal();
					}} type="primary">本月</Button>
				</div>
			)
		}
		else if (type == "year") {
			return (
				<div data-flex="main:justify" style={{ padding: "10px", borderTop: "1px solid #e7e7e7" }}>
					<Button size="small" onClick={() => {
						this.changeValue(moment().add(-2, "years"));
						this.toggleModal();
					}} type="primary">前年</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment().add(-1, "years"));
						this.toggleModal();
					}} type="primary">去年</Button>
					<Button size="small" onClick={() => {
						this.changeValue(moment());
						this.toggleModal();
					}} type="primary">今年</Button>
				</div>
			)
		}

	}
	render() {
		let { type = "date", value_datatype = "string", format } = this.props;
		let { pickerStart, pickerEnd, datePickerValue, showModal } = this.state;
		if (isNull(type)) {// type枚举  date:YYYY-MM-DD ,month:YYYY-MM ,year:YYYY 
			type = "date"
		}
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		let isString = value_datatype === "string";
		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				value = moment(value);
				if (type == "year") {
					value = value.format("YYYY")
				}
				else if (type == "month") {
					value = value.format("YYYY-MM")
				}
				else {
					value = value.format("YYYY-MM-DD")
				}
			}
			if (isString) {
				if (typeof value == "object") {
					value = moment(value).format(format);
				}
				value = new Date(value.replace(/-/g, "/"))
			}
		}
		return (
			<div className="am-list-item" style={{ paddingLeft: 0, lineHeight: "unset" }}>
				{this.renderButton()}
				<Modal
					visible={showModal}
					transparent
					wrapClassName="datepicker"
					style={{ width: "80%" }}
					footer1={
						[
							{
								text: "取消", onPress: () => {

								}
							},
							{
								text: "确定", onPress: () => {

								}
							}
						]
					}
				>
					<div className="am-picker-popup-header" >
						<div className="am-picker-popup-item am-picker-popup-header-left" onClick={() => {
							this.toggleModal()
						}}>取消</div>
						<div className="am-picker-popup-item am-picker-popup-title">选择时间</div>
						<div className="am-picker-popup-item am-picker-popup-header-right" onClick={() => {
							this.changeValue(datePickerValue)
							this.toggleModal();
						}}>确定</div>
					</div>
					<DatePickerView
						minDate={pickerStart}
						maxDate={pickerEnd}
						value={datePickerValue}
						mode={type}
						onChange={(e) => {
							this.setState({
								datePickerValue: e
							})
						}}
					/>
					{this.renderQuickDate()}
				</Modal>

			</div>
		)
	}
}
